<link rel="stylesheet" href="/static/css/module/banner.css"/>
<link rel="stylesheet" href="/static/css/lib/swiper/swiper.css"/>
<div class="J_banner">
  <div class="swiper-container">
    <a class="arrow-left" href="#"><span></span></a>
    <a class="arrow-right" href="#"><span></span></a>
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1">
        <div class="table-box">
          <div class="table-cell">
            <div>
              <h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s">为人力资源行业增速提效</h1>
              <p>Speed  &  Efficiency</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide slide1">
        <div class="table-box">
          <div class="table-cell">
            <div>
              <h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s">23423432</h1>
              <p>Speed  &  Efficiency</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ul class="pagination autoplay">
    <li><span><i></i></span></li>
    <li><span><i></i></span></li>
  </ul>
</div>

<script>
  require(['jquery', 'swiper', 'swiper.animate', 'swiper.progress'], function ($) {
    function bannder() {
      var autoplay=true;
      var mySwiper = new Swiper('.swiper-container', {
        autoplay: 3000,
        progress: true,
        speed: 1000,
        paginationClickable: true,
        loop: true,
        onTouchStart: function(swiper) {
          for (var i = 0; i < swiper.slides.length; i++) {
            swiper.setTransition(swiper.slides[i], 0);
            var txts = swiper.slides[i].querySelectorAll('.txt');
            for (var j = 0; j < txts.length; j++) {
              swiper.setTransition(txts[j], 0);
            }
          }
        },
        onSetWrapperTransition: function(swiper, speed) {
          for (var i = 0; i < swiper.slides.length; i++) {
            swiper.setTransition(swiper.slides[i], speed);
            var txts = swiper.slides[i].querySelectorAll('.txt');
            for (var j = 0; j < txts.length; j++) {
              swiper.setTransition(txts[j], speed);
            }
          }
        },
        onSlideChangeStart: function(swiper) {
          if (autoplay) {
            if (swiper.activeLoopIndex == 0) {
              $('.pagination li').removeClass('current');
              $('.pagination li').eq(0).removeClass('replace');
            }
            if (swiper.activeLoopIndex == 1) {
              $('.pagination li').eq(0).removeClass('firstCurrent current').addClass('replace')
            }
            $('.pagination li').eq(swiper.activeLoopIndex).addClass('current');
          } else {
            $('.pagination li').removeClass('current firstCurrent click');
            $('.pagination li').eq(swiper.activeLoopIndex).addClass('current');
          }

        },
        onFirstInit: function(swiper) {
          $('.pagination li').eq(0).addClass('firstCurrent');
          swiperAnimateCache(swiper); //隐藏动画元素
          swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper){
          swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        },
        onAutoplayStop: function() {
          autoplay=false;
          $('.autoplay').removeClass('autoplay');
        },
      })

      for (var i = 0; i < mySwiper.slides.length; i++) {
        mySwiper.slides[i].style.zIndex = i;
      }

      $('.arrow-left').on('click', function(e) {
        e.preventDefault()
        mySwiper.swipePrev()
      })
      $('.arrow-right').on('click', function(e) {
        e.preventDefault()
        mySwiper.swipeNext()
      })
      $(".pagination li").on('touchstart mousedown', function(e) {
        e.preventDefault()
        if (autoplay) {
          autoplay=false;
          mySwiper.stopAutoplay();
          $(this).addClass('click');
        }

        mySwiper.swipeTo($(this).index())
      })
    }
    setTimeout(function () {
      bannder()
    }, 500)

/*    var imgsrc1 = '/static/image/index/banner-1.png'
    var loadIMG = new Image()
    loadIMG.src = imgsrc1
    loadIMG.onload = function (e) {
      mySwiper.reInit();
    }*/
  })
</script>
